<script setup>
	import { ref } from "vue";
	import { ElMessage } from "element-plus";
	import { useRouter } from "vue-router";
	import { useUserStore } from "@/stores/userStore";
	import "element-plus/theme-chalk/el-message.css";

	const router = useRouter();
	const userStore = useUserStore();

	//表单校验 账号名字和密码
	// 1.z准备表单对象
	const form = ref({
		account: "cdshi0060",
		password: "123456",
		agree: true,
	});

	const validate = (rule, value, callback) => {
		// 自定义校验规则
		if (value) {
			callback();
		} else {
			callback(new Error("请勾选协议!"));
		}
	};

	// 2.准备规则对象
	const rules = {
		account: [
			{
				required: true,
				message: "用户名不能为空",
				trigger: "blur",
			},
		],
		password: [
			{
				required: true,
				message: "密码不能为空",
				trigger: "blur",
			},
			{
				min: 6,
				max: 14,
				message: "密码长度为6-14个字符",
				trigger: "blur",
			},
		],
		agree: [
			{
				validator: validate,
			},
		],
	};

	// ruleFormRef判断校验是否全部通过
	const ruleFormRef = ref(null);

	const loginHandler = (val) => {
		const { account, password } = form.value;
		// 调用实例身上的方法，进行同意校验，为true通过
		ruleFormRef.value.validate(async (valid) => {
			// valid true还是false
			if (valid) {
				// ToDo login
				try {
					await userStore.getUserAPI({ account, password });
					// 提示用户
					ElMessage({
						type: "success",
						message: "登录成功",
					});
					// 跳转首页
					router.replace("/");
				} catch (error) {
					throw error.response.data.message;
				}
			}
		});
	};

	// 1.用户名和密码只需要通过简单的配置（看文档的方式-复杂功能通过多个不同组件拆解）
	// 2.同意协议 自定义规则 validator:(rule, value, callback)=>{}
	// 3.统一校验 通过调用form实例方法 validate -> true
</script>


<template>
	<div>
		<header class="login-header">
			<div class="container m-top-20">
				<h1 class="logo">
					<RouterLink to="/">小兔鲜</RouterLink>
				</h1>
				<RouterLink class="entry" to="/">
					进入网站首页
					<i class="iconfont icon-angle-right"></i>
					<i class="iconfont icon-angle-right"></i>
				</RouterLink>
			</div>
		</header>

		<section class="login-section">
			<div class="wrapper">
				<nav>
					<a href="javascript:;">账户登录</a>
				</nav>
				<div class="account-box">
					<div class="form">
						<el-form
							:model="form"
							:rules="rules"
							label-position="right"
							label-width="60px"
							status-icon
							ref="ruleFormRef"
						>
							<el-form-item label="账户" prop="account">
								<el-input v-model="form.account" />
							</el-form-item>

							<el-form-item label="密码" prop="password">
								<el-input v-model="form.password" type="password" />
							</el-form-item>

							<el-form-item label-width="22px" prop="agree">
								<el-checkbox size="large" v-model="form.agree">
									我已同意隐私条款和服务条款
								</el-checkbox>
							</el-form-item>

							<el-button
								size="large"
								class="subBtn"
								@click="loginHandler(ruleFormRef)"
								>点击登录</el-button
							>
						</el-form>
					</div>
				</div>
			</div>
		</section>

		<footer class="login-footer">
			<div class="container">
				<p>
					<a href="javascript:;">关于我们</a>
					<a href="javascript:;">帮助中心</a>
					<a href="javascript:;">售后服务</a>
					<a href="javascript:;">配送与验收</a>
					<a href="javascript:;">商务合作</a>
					<a href="javascript:;">搜索推荐</a>
					<a href="javascript:;">友情链接</a>
				</p>
				<p>CopyRight &copy; 小兔鲜儿</p>
			</div>
		</footer>
	</div>
</template>

<style scoped lang='scss'>
	.login-header {
		background: #fff;
		border-bottom: 1px solid #e4e4e4;

		.container {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}

		.logo {
			width: 200px;

			a {
				display: block;
				height: 132px;
				width: 100%;
				text-indent: -9999px;
				background: url("@/assets/images/logo.png") no-repeat center 18px /
					contain;
			}
		}

		.sub {
			flex: 1;
			font-size: 24px;
			font-weight: normal;
			margin-bottom: 38px;
			margin-left: 20px;
			color: #666;
		}

		.entry {
			width: 120px;
			margin-bottom: 38px;
			font-size: 16px;

			i {
				font-size: 14px;
				color: $xtxColor;
				letter-spacing: -5px;
			}
		}
	}

	.login-section {
		background: url("@/assets/images/login-bg.png") no-repeat center / cover;
		height: 488px;
		position: relative;

		.wrapper {
			width: 380px;
			background: #fff;
			position: absolute;
			left: 50%;
			top: 54px;
			transform: translate3d(100px, 0, 0);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

			nav {
				font-size: 14px;
				height: 55px;
				margin-bottom: 20px;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				padding: 0 40px;
				text-align: right;
				align-items: center;

				a {
					flex: 1;
					line-height: 1;
					display: inline-block;
					font-size: 18px;
					position: relative;
					text-align: center;
				}
			}
		}
	}

	.login-footer {
		padding: 30px 0 50px;
		background: #fff;

		p {
			text-align: center;
			color: #999;
			padding-top: 20px;

			a {
				line-height: 1;
				padding: 0 10px;
				color: #999;
				display: inline-block;

				~ a {
					border-left: 1px solid #ccc;
				}
			}
		}
	}

	.account-box {
		.toggle {
			padding: 15px 40px;
			text-align: right;

			a {
				color: $xtxColor;

				i {
					font-size: 14px;
				}
			}
		}

		.form {
			padding: 0 20px 20px 20px;

			&-item {
				margin-bottom: 28px;

				.input {
					position: relative;
					height: 36px;

					> i {
						width: 34px;
						height: 34px;
						background: #cfcdcd;
						color: #fff;
						position: absolute;
						left: 1px;
						top: 1px;
						text-align: center;
						line-height: 34px;
						font-size: 18px;
					}

					input {
						padding-left: 44px;
						border: 1px solid #cfcdcd;
						height: 36px;
						line-height: 36px;
						width: 100%;

						&.error {
							border-color: $priceColor;
						}

						&.active,
						&:focus {
							border-color: $xtxColor;
						}
					}

					.code {
						position: absolute;
						right: 1px;
						top: 1px;
						text-align: center;
						line-height: 34px;
						font-size: 14px;
						background: #f5f5f5;
						color: #666;
						width: 90px;
						height: 34px;
						cursor: pointer;
					}
				}

				> .error {
					position: absolute;
					font-size: 12px;
					line-height: 28px;
					color: $priceColor;

					i {
						font-size: 14px;
						margin-right: 2px;
					}
				}
			}

			.agree {
				a {
					color: #069;
				}
			}

			.btn {
				display: block;
				width: 100%;
				height: 40px;
				color: #fff;
				text-align: center;
				line-height: 40px;
				background: $xtxColor;

				&.disabled {
					background: #cfcdcd;
				}
			}
		}

		.action {
			padding: 20px 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.url {
				a {
					color: #999;
					margin-left: 10px;
				}
			}
		}
	}

	.subBtn {
		background: $xtxColor;
		width: 100%;
		color: #fff;
	}
</style>